<template>
  <div class="collect">

    <el-form :inline="true" label-width="80px" label-position="top">
      <el-form-item label="要班结的油站" prop="payType">
        <el-select v-model="stationId" placeholder="选择班结的油站" clearable style="width: 350px" size="small"
          @change="staionChange">
          <el-option :label="ele.stationName" v-for="ele in stationList" :key='ele.stationId'
            :value="ele.stationId"></el-option>

        </el-select>
      </el-form-item>
    </el-form>

    <div class="item">
      <div class="title">班结对账汇总</div>
      <div class="table">
        <el-table :show-header="false" :data="table1" border style="width: 100%; height: 100%"
          :cell-class-name="addclass">
          <el-table-column prop="title1" label="数值 2">
            <template slot-scope="scope">
              <div style="width: 100%; height: 100%">
                {{ scope.row.title1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="amount1" label="数值 3"> </el-table-column>
          <el-table-column prop="title2" label="数值 2"> </el-table-column>
          <el-table-column prop="amount2" label="数值 3"> </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="item">
      <div class="title">油品汇总</div>
      <div class="table">
        <el-table :data="queryGroupByOil" border style="width: 100%; height: 100%">
          <el-table-column prop="oilName" label="油品名"> </el-table-column>
          <el-table-column prop="oilPrice" label="油价-单价"> </el-table-column>
          <el-table-column prop="orderLiters" label="数量(L/kg)">
          </el-table-column>
          <el-table-column prop="receivableAmt" label="应收"> </el-table-column>
          <el-table-column prop="amt" label="实收"> </el-table-column>
          <!-- <el-table-column prop="serviceCharge" label="手续费"> </el-table-column> -->
          <!-- <el-table-column prop="equipmentCode" label="班结设备"> </el-table-column> -->
        </el-table>
      </div>
    </div>
    <!-- <div class="item">
      <div class="title">油枪汇总</div>
      <div class="table">
        <el-table :data="queryGroupByOilGun" border style="width: 100%; height: 100%">
          <el-table-column prop="oil_gun" label="油枪"> </el-table-column>
          <el-table-column prop="oil_name" label="油品名"> </el-table-column>
          <el-table-column prop="oil_price" label="油价"> </el-table-column>
          <el-table-column prop="order_liters" label="加油升数"> </el-table-column>
          <el-table-column prop="receivable_amt" label="应收"> </el-table-column>
          <el-table-column prop="amt" label="实收"> </el-table-column>
          <el-table-column prop="serviceCharge" label="手续费"> </el-table-column>
        </el-table>
      </div>
    </div> -->
    <!--
    <div class="item">
      <div class="title">非油品汇总</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="合计金额"> </el-table-column>
          <el-table-column prop="q2" label="合计优惠"> </el-table-column>
          <el-table-column prop="q3" label="合计应收款"> </el-table-column>
        </el-table>
      </div>
    </div>
    
    <div class="item">
      <div class="title">员工加油汇总</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="员工"> </el-table-column>
          <el-table-column prop="q2" label="油品"> </el-table-column>
          <el-table-column prop="q3" label="油枪"> </el-table-column>
          <el-table-column prop="q4" label="加油量"> </el-table-column>
          <el-table-column prop="q5" label="分类应收款"> </el-table-column>
        </el-table>
      </div>
    </div>
    -->
    <!-- <div class="item">
      <div class="title">支付方式汇总</div>
      <div class="table">
        <el-table :data="queryGroupByPayType" border style="width: 100%; height: 100%">
          <el-table-column prop="pay_type" label="支付方式"> </el-table-column>
          <el-table-column prop="amt" label="消费合计"> </el-table-column>
          <el-table-column prop="refund_amt" label="退款合计"> </el-table-column>
          <el-table-column prop="discount_amt" label="优惠合计"> </el-table-column>
          <el-table-column prop="serviceCharge" label="手续费"> </el-table-column>
          <el-table-column prop="sumPrice" label="加总合计"> </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="item">
      <div class="title">充值汇总</div>
      <div class="table">
        <el-table :data="cardSum" border style="width: 100%; height: 100%">
          <el-table-column prop="amt" label="金额"> </el-table-column>
          <el-table-column prop="orderCount" label="笔数"> </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="item">
      <div class="title">员工方式汇总</div>
      <div class="table">
        <el-table :data="queryGroupByEmployees" border style="width: 100%; height: 100%">
          <el-table-column prop="receivableAmt" label="应收"> </el-table-column>
          <el-table-column prop="amt" label="实收"> </el-table-column>
          <el-table-column prop="serviceCharge" label="手续费"> </el-table-column>
          <el-table-column prop="discountAmt" label="优惠"> </el-table-column>
          <el-table-column prop="refundAmt" label="退款"> </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="item">
      <div class="title">活动优惠汇总</div>
      <div class="table">
        <el-table :data="queryGroupByActivity" border style="width: 100%; height: 100%">
        <el-table-column prop="class_no" label="班结号"> </el-table-column>
          <el-table-column prop="order_count" label="订单数量"> </el-table-column>
          <el-table-column prop="discount_amt" label="优惠金额"> </el-table-column>
        </el-table>
      </div>
    </div> -->
    <!--
    <div class="item">
      <div class="title">收款分类汇总</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="收款方式"> </el-table-column>
          <el-table-column prop="q2" label="实收合计"> </el-table-column>
          <el-table-column prop="q3" label="退款合计"> </el-table-column>
          <el-table-column prop="q4" label="优惠合计"> </el-table-column>
          <el-table-column prop="q5" label="加总合计"> </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="item">
      <div class="title">积分商城收款分类汇总</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="收款方式"> </el-table-column>
          <el-table-column prop="q2" label="实收合计"> </el-table-column>
          <el-table-column prop="q3" label="优惠合计"> </el-table-column>
          <el-table-column prop="q4" label="使用积分"> </el-table-column>
          <el-table-column prop="q5" label="订单合计"> </el-table-column>
        </el-table>
      </div>
    </div>
        
    <div class="item">
      <div class="title">自定义金额充值</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="微信"> </el-table-column>
          <el-table-column prop="q2" label="支付宝"> </el-table-column>
          <el-table-column prop="q3" label="现金"> </el-table-column>
          <el-table-column prop="q4" label="使用积分"> </el-table-column>
          <el-table-column prop="q5" label="银行卡额"> </el-table-column>
        </el-table>
      </div>
    </div>
    -->
    <div class="last" v-if="!!querySummaryByClassNo[0]">
      <div>收银员：{{ querySummaryByClassNo[0].createName }}</div>
      <div>
        班结时间：{{ querySummaryByClassNo[0].classStartTime }}-{{
          querySummaryByClassNo[0].classEndTime
        }}
      </div>
    </div>

    <div>
      <el-input maxlength="100" type="textarea" :rows="3" placeholder="请输入备注" v-model="note">
      </el-input>
    </div>

    <div style="margin:10px 0; text-align: right;">
      <!-- <button type="default">确认班结</button> -->
      <el-button @click="goSettlement" type="primary" size="small" :disabled="canSummary">确认班结</el-button>
    </div>
  </div>
</template>

<script>
import {
  getSettlementInfo,
  getIntoSettlement,
  getGoSettlement,
} from "@/api/settlement";
import {
  sysDeptDemoList,
} from "@/api/label/label";
import {
  getStationList,

} from "@/api/dept";
export default {
  data() {
    return {
      querySummaryByClassNo: [],
      queryGroupByActivity: [],
      queryGroupByOil: [],
      queryGroupByOilGun: [],
      queryGroupByPayType: [],
      queryGroupByEmployees: [],
      cardSum: [],
      table1: [
        // {
        //     title1: "消费合计应收（不含充值）：",
        //     amount1: "",
        //     title2: "短款：",
        //     amount2: "",
        //   },
        //   {
        //     title1: "消费合计实收（不含充值）：",
        //     amount1: "",
        //     title2: "优惠券合计金额：",
        //     amount2: "",
        //   },
        //   {
        //     title1: "充值实收合计金额：",
        //     amount1: "",
        //     title2: "立减合计金额：",
        //     amount2: "",
        //   },
        //   {
        //     title1: "客户退款合计金额：",
        //     amount1: "",
        //     title2: "回罐合计金额：",
        //     amount2: "",
        //   }
        {
          title1: "消费合计应收：",
          amount1: "",
          title2: "消费合计实收：",
          amount2: "",
        },
        {
          title1: "优惠券合计金额：",
          amount1: "",
          title2: "充值实收合计金额：",
          amount2: "",
        },
        {
          title1: "客户退款合计金额：",
          amount1: "",
          title2: "立减合计金额：",
          amount2: "",
        },
        {
          title1: "提现总金额",
          amount1: ""
        }
      ],
      table2: [
        {
          q1: "11",
          q2: "12",
          q3: "13",
          q4: "14",
          q5: "15",
        },
      ],
      classEndTime: "",
      stationList: [],
      stationId: '',
      summaryData: {},
      note: ''
    };
  },
  created() {
    this.getStationList();
  },
  computed: {
    canSummary() {
      return !(this.stationId)
    }
  },
  methods: {
    staionChange(stationId) {
      if (!stationId) {
        return
      }
      getIntoSettlement({
        stationId: stationId
      }).then((res) => {

        this.summaryData = res.data
        // console.log("00000000", res);
        // this.querySummaryByClassNo = res.data.querySummaryByClassNo
        // this.queryGroupByActivity = res.data.queryGroupByActivity
        this.createEndTime = this.summaryData.createEndTime;
        this.queryGroupByOil = this.summaryData.details;
        // this.queryGroupByOilGun = this.summaryData.queryGroupByOilGun
        // this.queryGroupByPayType = this.summaryData.queryGroupByPayType
        // this.queryGroupByEmployees = this.summaryData.listDetail4User
        // this.cardSum = [this.summaryData.cardSum]
        this.table1[0].amount1 = this.summaryData.summary.receivableAmt || 0 // 消费合计应收
        this.table1[0].amount2 = this.summaryData.summary.amt || 0 // 消费合计实收
        this.table1[1].amount1 = this.summaryData.summary.discountCouponAmt || 0 // 优惠券合计金额
        this.table1[1].amount2 = this.summaryData.summary.actualRechargeReceivedAmt || 0 // 充值实收合计金额
        this.table1[2].amount1 = this.summaryData.summary.refundAmt || 0 // 客户退款合计金额
        this.table1[2].amount2 = this.summaryData.summary.discountAmt || 0 // 立减合计金额
        this.table1[3].amount1 = this.summaryData.summary.totalWithdrawalAmount || 0 // 提现总金额



        // // 支付方式汇总
        // const sumPayType = {};
        // sumPayType.pay_type = "合计";
        // // sumPayType.pay_type = res.data.querySummaryByClassNo.receivableAmt;
        // sumPayType.amt = res.data.querySummaryByClassNo[0].amt;
        // sumPayType.refund_amt = res.data.querySummaryByClassNo[0].refundAmt;
        // sumPayType.discount_amt = res.data.querySummaryByClassNo[0].discountAmt;
        // sumPayType.serviceCharge = res.data.querySummaryByClassNo[0].serviceCharge;
        // sumPayType.serviceCharge = res.data.querySummaryByClassNo[0].serviceCharge;
        // sumPayType.sumPrice = res.data.querySummaryByClassNo[0].sumPrice;

        // // console.log(sumPayType);

        // this.queryGroupByPayType.push(sumPayType);

        // // console.log('queryGroupByPayType',this.queryGroupByPayType)
        // // console.log('querySummaryByClassNo',this.querySummaryByClassNo)
      });

    },
    // 判断是油企，油站，admin
    authFn(authArr) {
      let data = {
        pageSize: 100,
        pageNum: 1,
      }
      if (authArr.length > 0) {
        if (authArr.length >= 1 && authArr.includes('1')) {
          data.enterpriseId = this.presentEnterprise.enterpriseId
          return data
        } else if (authArr.length >= 1 && authArr.includes('2')) {
          data.stationId = this.presentSation
          return data
        }
      } else {
        return data
      }
    },
    getStationList() {
      let data = this.authFn(this.$store.state.user.roles)
      getStationList(data)
        .then((res) => {
          this.stationList = res.rows;
          // this.stationListTotal = res.total;
          // this.stationList = res.rows;
        })
    },
    goSettlement() {
      getGoSettlement({
        classEndTime: this.createEndTime,
        stationId: this.stationId,
        note: this.note
      }).then((res) => {
        this.$router.replace({
          path: "/overview/Overview_WorkSummaryRecord",
        });
      });
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(rowIndex, columnIndex);
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    addclass(row) {
      if (row.columnIndex % 2 === 0) return "cellcss";
    },
  },
};
</script>
<style lang="scss">
::v-deep .card-table {
  padding: 10px;
  margin-top: 20px;
  background-color: #f8f8f8;

  .el-button {
    margin: 0 5px 0 0;
  }
}

// 表格样式
::v-deep .el-form-item {
  margin-bottom: 0;

  .el-form-item__label {
    padding: 0;
    margin: 0;
    height: 29px;
    font-weight: 400;
    font-size: 12px;
  }

  .el-button--cyan {
    margin-left: 20px;
  }
}

::v-deep .el-table {
  border: 1px #f8f8f8 solid;
  border-bottom: 1px #dfe6ec solid;
}

::v-deep .is-center {
  border: 1px transparent solid;
  border-bottom: 1px #f8f8f8 solid;
}

.collect {
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;

  .item {
    margin-top: 10px;

    .title {
      text-align: center;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .cellcss {
    background-color: #f6f6f6;
  }

  .last {
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
}
</style>